<template>
  <div class="MenuModel" :class="_systemConfig.menuTheme">
    <!--样式一-->
    <div class="style1 allTrans " :class="isOpen?'is-open':'is-close'" v-if="_systemConfig.menuTheme === 'default'">
      <div class="style1_logo">
        <img v-if="_systemConfig.logoSrc" :src="_systemConfig.logoSrc" />
        <img v-else src="../../../src/assets/logo.png" />
        <span>{{ _systemConfig.name }}</span>
      </div>
      <div class="style1_list">
        <div class="style1_list_item" v-for="item in _menuData" v-bind:key="item.id">
          <template v-if="isOpen || (item.children && item.children.length)">
            <div class="style1_list_item_label allTrans first" :class="activeMenuKey===item.id || (!isOpen && isActive(item))?'is-active':''"
                 v-on:click="selectMenuItem(item)">
              <div class="s1_l_i" :class="item.source"></div>
              <div class="s1_l_l" :class="openMenuKey">{{ item.name }}</div>
              <div class="s1_l_a vbl vbl-icon-arrow-right2-copy-copy-copy allTrans" :style="isActive(item) && 'transform: rotate(180deg)'"
                   v-if="item.children && item.children.length"></div>
            </div>
          </template>
          <el-tooltip :append-to-body="true" class="item" effect="dark" v-else :content="item.name" placement="right">
            <div class="style1_list_item_label allTrans first" :class="activeMenuKey===item.id || (!isOpen && isActive(item))?'is-active':''"
                 v-on:click="selectMenuItem(item)">
              <div class="s1_l_i" :class="item.source"></div>
              <div class="s1_l_l" :class="openMenuKey">{{ item.name }}</div>
              <div class="s1_l_a vbl vbl-icon-arrow-right2-copy-copy-copy"
                   v-if="item.children && item.children.length"></div>
            </div>
          </el-tooltip>

          <div class="style1_list_item_child first"
               :style="{'height': isOpen ? ((isActive(item)?getOpenHeight(item):0) + 'px') : 'auto'}"
               v-if="item.children && item.children.length">
            <div class="style1_list_name" v-if="!isOpen">{{ item.name }}</div>
            <div class="style1_list_item" v-for="child in item.children" v-bind:key="child.id">
              <div class="style1_list_item_label allTrans second" :class="activeMenuKey===child.id?'is-active':''"
                   v-on:click="selectMenuItem(child, item)">
                <div class="s1_l_i" :class="child.source"></div>
                <div class="s1_l_l">{{ child.name }}</div>
                <div class="s1_l_a vbl vbicon-arrow-right2-copy-copy-copy"
                     v-if="child.children && child.children.length"></div>
              </div>
              <div class="style1_list_item_child second"
                   :style="{'height': (isActive(child, item)?child.children.length*48:0) + 'px'}"
                   v-if="child.children && child.children.length">
                <div class="style1_list_item" v-for="second in child.children" v-bind:key="second.id">
                  <div class="style1_list_item_label allTrans three" :class="activeMenuKey===second.id?'is-active':''"
                       v-on:click="selectMenuItem(second, child)">
                    <div class="s1_l_i" :class="second.source"></div>
                    <div class="s1_l_l">{{ second.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="style1_flg" :class="isOpen?'el-icon-caret-left':'el-icon-caret-right'" v-on:click="isOpen=!isOpen"></div>
    </div>
    <!--样式二-->
    <div class="style2" v-else-if="_systemConfig.menuTheme === 'pithy'">
      <div class="style2_mainBar">
        <div class="style2_mainBar_logo">
          <img v-if="_systemConfig.logoSrc" :src="_systemConfig.logoSrc" />
          <img v-else src="../../../src/assets/logo.png" />
        </div>
        <div class="style2_mainBar_list">
          <el-tooltip class="item" effect="dark" :content="item.name" placement="right" v-for="item in _menuData"
                      v-bind:key="item.id">
            <div class="style2_mainBar_list_item allTrans"
                 :class="activeMenuParam&&activeMenuParam.id===item.id?'is-active':''"
                 v-on:click="activeMenuParam = item"><i class="vbl vbl-system"></i></div>
          </el-tooltip>
        </div>
      </div>
      <div class="style2_assistBar" v-if="activeMenuParam">
        <div class="style2_assistBar_title">{{ activeMenuParam.name }}</div>
        <div class="style2_assistBar_list">
          <div class="style2_assistBar_list_span" v-for="item in activeMenuParam.children" v-bind:key="item.id">
            <div class="style2_assistBar_list_span_h1">{{ item.label }}</div>
            <div class="style2_assistBar_list_span_h2" v-for="child in item.children" v-bind:key="child.id"
                 v-on:click="activeMenuKey=child.id" :class="activeMenuKey === child.id?'is-active':''">
              {{ child.label }}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {reactive} from 'vue';

export default {
  mixins: [],
  components: {},
  data() {
    return {
      activeMenuKey: null,
      // 样式一参数
      openMenuKey: null,
      // 样式二参数
      activeMenuParam: null,

      isOpen: true
    }
  },
  props: {},
  computed: {
    _menuData() {
      return this.$store.getters.getMenuData
    },
    // 当前页面
    _currentPagePath: function () {
      return this.$store.getters.getCurrentPagePath
    },
    // 样式一
    isActive() {
      return function (item, p) {
        let self = this
        if (!p) {
          let find = item.children.find(t => {
            return t.id === self.openMenuKey
          })
          return item.id === self.openMenuKey || !!find
        } else if (p) {
          return item.id === self.openMenuKey
        }
      }
    },
    getOpenHeight() {
      return function (item) {
        let self = this
        let find = item.children.find(t => {
          return t.id === self.openMenuKey
        })
        return (item.children.length + (find ? find.children.length : 0)) * 48
      }
    }
  },
  setup(props) {
    const model = reactive(props.modelValue || {});
    return {model}
  },
  mounted() {
    this.initMenuKey(this._menuData, this.$route.fullPath)
  },
  methods: {

    // 样式一
    selectMenuItem(item, p) {
      if (item.children && item.children.length) {
        if (!this.isOpen) return
        this.openMenuKey = ((this.isActive(item, p) || this.openMenuKey === item.id) ? (p ? p.id : null) : item.id)
      } else {
        this.activeMenuKey = item.id
        let query = null, url = item.routerPath
        if (url.indexOf('?') > -1) {
          url = url.split("?")[0]
          query = this.$vbUtils.getQueryVariable(item.routerPath)
        }
        this.$routeUrl(url, query)
      }
    },
    initMenuKey(list, fullPath) {
      let self = this
      list.forEach(menu => {
        if (menu.routerPath === fullPath) {
          self.openMenuKey = menu.id
          self.activeMenuKey = menu.id
        } else if (menu.children) {
          self.initMenuKey(menu.children, fullPath)
        }
      })
    }
  },
  watch: {
    _currentPagePath: function () {
      let page = this.$store.getters.getPageByPath(this._currentPagePath)
      if (page) {
        this.initMenuKey(this._menuData, page.fullPath)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.MenuModel {
  height: 100%;
  .s1_l_l {
    word-break: keep-all;
  }
}
</style>
